<template>
  <div class="login-input">
    <el-form>
      <el-form-item prop="password" class="input-telephone">
        <el-input prefix-icon="Iphone" placeholder="请输入手机号" v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item prop="code" class="input-code">
        <el-input prefix-icon="Check" placeholder="请输入验证码" v-model="user.code"></el-input>
<!--        <el-button type="primary">发送验证码</el-button>-->
      </el-form-item>
    </el-form>
  </div>


</template>

<script setup>
import {ref} from "vue";
const code = ref('')//验证码组件传递过来的code

const getCode = (codeOfGet) => {
  code.value = codeOfGet.toLowerCase()
}

const user = ref({
  code: '',//表单用户输入的code
  username: '',
  password: ''
})

const rules = ref({
  username: [{required: true, message: "请输入账号", trigger: 'blur'}],
  password: [{required: true, message: "请输入密码", trigger: 'blur'}]
})

const validateCode = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入验证码'))
  } else if (value.toLowerCase() !== code.value) {
    callback(new Error('验证码错误'))
  } else {
    callback()
  }
}
</script>

<style scoped>
.input-telephone {
  margin-top: 20px;

  * {
    height: 48px;
  }
}

.input-code {
  display: flex;
  width: 100%;
  height: 48px;

  :deep(.el-input) {
    height: 48px;
    width: 236px;
  }

  *:nth-child(2) {
    height: 48px;
    width: 122px;
    margin-left: 20px;
  }

}


</style>
